<script setup lang="ts">
import {onMounted, ref} from 'vue'
import type {Page} from "@/interface/base.ts";
import {useAddOrUpdateMuseumApi, usePageMuseumsData} from "@/services/api";
import {ElMessageBox, UploadProps} from "element-plus";
import type {Museum, PageMuseumsReqVO} from "@/interface/museum.ts";
import {useStore} from "vuex";
import {Plus} from "@element-plus/icons-vue";

const store = useStore()
const show = ref<boolean>(false)
const title = ref<string>('')
const headers = ref({
  Authorization: store.getters["auth/getToken"]
})
const museum = ref<Museum>({
  address: "",
  cardImage: "",
  images: "",
  introduce: "",
  name: "",
  status: 0
})

const tableData = ref<Page<Museum>>({
  list: [],
  total: 0
})
const pageMuseumsReq = ref<PageMuseumsReqVO>({
  size: 10,
  current: 1,
})
const onConfirm = async () => {
  try {
    await useAddOrUpdateMuseumApi(museum.value)
  } finally {
    show.value = false
    await loadData()
  }
}
const onSubmit = () => {
  loadData()
}
const onEdit = (row: Museum) => {
  museum.value = row
  title.value = '编辑'
  show.value = true
}
const onAdd = () => {
  title.value = '添加'
  museum.value = null
  museum.value = {
    address: "",
    cardImage: "",
    images: "",
    introduce: "",
    name: "",
    status: 0
  }
  show.value = true
}
const loadData = async () => {
  const {data: res} = await usePageMuseumsData(pageMuseumsReq.value);
  if (!res || !res.target) {
    tableData.value.list = res.list
    tableData.value.total = res.total
  }
}
const handleSizeChange = () => {
  pageMuseumsReq.value.current = 1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageMuseumsReq.value.current = val
  loadData()
}
const handleMuseumCardImageSuccess: UploadProps['onSuccess'] = (
    response
) => {
  museum.value.cardImage = response.data
}
const handleMuseumImageSuccess: UploadProps['onSuccess'] = (
    response
) => {
  if (museum.value.images == '') {
    museum.value.images = response.data
  } else if (museum.value.images.split(';').length === 3) {
    museum.value.images = museum.value.images.split(';').slice(1).join(';') + `;${response.data}`
  } else {
    museum.value.images += `;${response.data}`
  }

}
onMounted(() => {
  loadData()
})

</script>

<template>
  <div class="container">
    <div class="search">
      <el-form :inline="true" :model="pageMuseumsReq" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="pageMuseumsReq.name" placeholder="输入名称" clearable/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
              v-model="pageMuseumsReq.status"
              placeholder="选择状态"
              clearable
          >
            <el-option label="启用" :value="1"/>
            <el-option label="禁用" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button type="primary" @click="onAdd">
        添加
      </el-button>
    </div>
    <div class="table">
      <el-table :data="tableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="90"/>
        <el-table-column prop="name" label="名称" width="100"/>
        <el-table-column prop="address" label="地址" width="180"/>
        <el-table-column prop="introduce" label="介绍" width="180">
          <template #default="scope">
          <el-text :truncated="true" line-clamp="4">
            {{ scope.row.introduce}}
          </el-text>
          </template>
        </el-table-column>
        <el-table-column prop="cardImage" label="卡片图片" width="120">
          <template #default="scope">
            <el-image style="width: 80px; height: 80px" :src="scope.row.cardImage" fit="fill"/>
          </template>
        </el-table-column>
        <el-table-column prop="images" label="博物馆图集" width="300">
          <template #default="scope">
            <div>
              <el-image v-for="(image,index) in scope.row.images.split(';')"
                        :key="index"
                        style="width: 80px; height: 80px"
                        :src="image" fit="fill"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="static" label="状态" width="100">
          <template #default="scope">
            <el-tag
                :type="scope.row.status == 1 ? 'success' : 'danger'"
            >
              {{ scope.row.status == 1 ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="90">
          <template #default="scope">
            <el-button type="primary" size="small" @click="onEdit(scope.row)">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="pageMuseumsReq.current"
          v-model:page-size="pageMuseumsReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
        v-model="show"
        :title="title"
        width="30%"
    >
      <el-form :label-width="100" :inline="true" :model="museum">
        <el-form-item label="名称">
          <el-input v-model="museum.name"/>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="museum.address"/>
        </el-form-item>
        <el-form-item label="简介">
          <el-input
              v-model="museum.introduce"
              type="textarea"
          />
        </el-form-item>
        <el-form-item label="卡片图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost/api/admin/upload"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleMuseumCardImageSuccess"
          >
            <img v-if="museum.cardImage" :src="museum.cardImage" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="博物馆图集">
          <template v-for="(image,index) in museum.images.split(';')">
            <img v-if="museum.images !== '' && index < 2"
                 :key="index"
                 :src="image"
                 class="avatar"/>
          </template>
          <el-upload
              class="avatar-uploader"
              action="http://localhost/api/admin/upload"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleMuseumImageSuccess"
          >
            <img v-if="museum.images.split(';').length === 3" :src="museum.images.split(';')[2]" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
              v-model="museum.status"
              placeholder="选择状态"
          >
            <el-option label="启用" :value="1"/>
            <el-option label="禁用" :value="0"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="onConfirm">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.container {
  flex: 1;
  padding: 24px;

  .action {
    margin-bottom: 10px;
  }

  .demo-pagination-block {
    margin-top: 20px;
  }

  .el-dialog {
    .el-form {
      .el-form-item {
        .avatar {
          width: 80px;
          height: 80px;
          display: block;
        }

        .avatar-uploader {
          border: 1px dashed var(--el-border-color);
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: var(--el-transition-duration-fast);

          .avatar {
            width: 80px;
            height: 80px;
            display: block;
          }

          &:hover {
            border-color: var(--el-color-primary);
          }

          .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 80px;
            height: 80px;
            text-align: center;
          }
        }
      }
    }
  }


}


</style>